<script>
import { selectCourse, deleteCourseList } from '@/api/admin/course'
import { Search, Plus } from '@element-plus/icons-vue'
import { weeks } from '@/constant'
import addCourseDialog from '@/pages/admin/dialogModel/course/addCourseDialog.vue'
export default {
  components: {
    Search,
    Plus,
    addCourseDialog,
  },
  data() {
    return {
      params: { pageNo: 1, pageSize: 10, cname: '', tname: '', department: '' },
      list: [],
      total: 0,
      weeks,
      flag: false,
    }
  },
  computed: {},
  methods: {
    formatterTime(_, __, cellValue) {
      let [s, w, d] = cellValue.split('-')
      return `${weeks[s]} 第${w * 1 + 1}~${d}节`
    },
    resetParamsAndLoad() {
      this.params.pageNo = 1
      this.selectCourse()
    },
    async selectCourse() {
      let { total, list } = await selectCourse(this.params)
      this.total = total
      this.list = list
    },
    async removeCourseById(course_id) {
      await deleteCourseList({
        course_id,
      })
      await this.selectCourse()
    },
  },
  created() {
    this.selectCourse()
  },
}
</script>
<template>
  <div class="tools">
    <div class="search">
      <el-input placeholder="课程名称" v-model="params.cname" size="small"></el-input>
      <el-input placeholder="教师名称" v-model="params.tname" size="small"></el-input>
      <el-input placeholder="系名" v-model="params.department" size="small"></el-input>
      <el-button type="primary" @click="resetParamsAndLoad">
        <el-icon><Search /></el-icon>
        <span>查询</span>
      </el-button>
    </div>
    <div>
      <el-button type="primary" @click="flag = true">
        <el-icon><Plus /></el-icon>
        <span>添加</span>
      </el-button>
    </div>
  </div>
  <el-table border stripe :data="list">
    <el-table-column type="index" label="序号" width="50"></el-table-column>
    <el-table-column label="课程名称" prop="course_name"></el-table-column>
    <el-table-column label="带课教师" prop="teacher_name"></el-table-column>
    <el-table-column label="所属系" prop="department_name"></el-table-column>
    <el-table-column label="年级" prop="course_grade"></el-table-column>
    <el-table-column label="学分" #default="{ row }" width="60">
      <el-tag size="small" effect="dark">{{ row.course_credit }}</el-tag>
    </el-table-column>
    <el-table-column
      label="上课时间"
      prop="course_time"
      :formatter="formatterTime"
    ></el-table-column>
    <el-table-column label="已选" #default="{ row }" width="60">
      <el-tag size="small" effect="dark" type="info">{{ row.course_selected_count }}</el-tag>
    </el-table-column>
    <el-table-column label="座位数" #default="{ row }" width="60">
      <el-tag size="small" effect="dark" type="success">{{ row.course_max_size }}</el-tag>
    </el-table-column>
    <el-table-column label="操作" #default="{ row }">
      <el-button type="primary" size="small" link>编辑</el-button>
      <el-popconfirm title="是否确认删除该课程" #reference>
        <el-button type="danger" size="small" link @click="removeCourseById(row.course_id)"
          >删除</el-button
        ></el-popconfirm
      >
    </el-table-column>
  </el-table>
  <el-pagination
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    :page-sizes="[5, 10, 20, 60]"
    v-model:page-size="params.pageSize"
    v-model:current-page="params.pageNo"
    background
    size="small"
    @change="selectCourse"
  ></el-pagination>
  <addCourseDialog v-model="flag"></addCourseDialog>
</template>
<style scoped>
.tools {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.search {
  display: flex;
  flex-flow: row nowrap;
}
.search > * {
  margin-right: 10px;
}
.el-table {
  margin-top: 20px;
}
.el-tag {
  width: 100%;
}
.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
</style>
